<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客管理页面</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f8f9fa;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        .admin-header {
            background-color: #333;
            color: white;
            padding: 15px 20px;
            border-bottom: 1px solid #454d55;
            text-align: center;
            font-size: 36px;
        }
        .admin-header h1 {
            margin: 0;
            font-size: 24px;
            font-weight: bold;
        }
        .content-container {
            display: flex;
            flex: 1;
            padding: 20px;
        }
        .sidebar {
            width: 200px;
            background-color: #fff;
            padding: 20px;
            margin-right: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .sidebar h3 {
            margin-bottom: 20px;
            font-size: 18px;
        }
        .menu-item {
            display: block;
            padding: 10px 0;
            color: #337ab7;
            text-decoration: none;
            font-size: 14px;
        }
        .menu-item:hover {
            color: #286090;
        }
        .menu-item.active {
            color: #007bff;
            font-weight: bold;
        }
        .main-content {
            flex: 1;
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .content-header {
            font-size: 18px;
            margin-bottom: 20px;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        .article-table {
            width: 100%;
            border-collapse: collapse;
        }
        .article-table th,
        .article-table td {
            padding: 12px 15px;
            border: 1px solid #ddd;
            text-align: left;
        }
        .article-table th {
            background-color: #f8f9fa;
            font-weight: normal;
            color: #666;
        }
        .action-buttons .btn {
            padding: 5px 10px;
            font-size: 12px;
            margin-right: 5px;
        }
        .footer {
            background-color: #343a40;
            color: white;
            text-align: center;
            padding: 10px 0;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="admin-header">
        <h1>"{{ nickname }}"的博客管理面板</h1>
    </div>

    <div class="content-container">
        <!-- 左侧菜单 -->
        <div class="sidebar">
            <h3>菜单</h3>
            <a href="#" class="menu-item active"><i class="fas fa-list"></i> 博文管理</a>
            <a href="{{ url_for('admin.add_article') }}" class="menu-item">
                    <i class="fas fa-plus"></i> 发表博文</a>
            <a href="#" class="menu-item"><i class="fas fa-folder"></i> 分类管理</a>
            <a href="#" class="menu-item"><i class="fas fa-cog"></i> 个人设置</a>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <div class="content-header">博文列表</div>
            <table class="article-table">
                <thead>
                    <tr>
                        <th>标题</th>
                        <th>分类</th>
                        <th>发布日期</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for article in articles %}
                    <tr>
                        <td>{{ article.title }}</td>
                        <td>{{ article.category_name if article.category_name else '无分类' }}</td>
                        <td>{{ article.create_date.strftime('%Y-%m-%d') if article.create_date else '未知' }}</td>
                        <td class="action-buttons">
                            <a href="{{ url_for('admin.edit_article', article_id=article.id) }}" class="btn btn-sm btn-primary">
                                <i class="fas fa-edit"></i> 编辑
                            </a>
                            <form method="POST" action="{{ url_for('admin.delete_article', article_id=article.id) }}" style="display: inline;">
                                <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('确定要永久删除这篇文章吗？此操作不可撤销！')">
                                    <i class="fas fa-trash"></i> 删除
                                </button>
                            </form>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="4" class="text-center py-4">
                            <div class="alert alert-info mb-0">
                                <i class="fas fa-info-circle"></i> 
                                您还没有发表过任何文章，
                                <a href="{{ url_for('admin.add_article') }}" class="alert-link">
                                    点击这里创建第一篇
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <div class="footer">
        <p>&copy; 2024 Blog Admin. All rights reserved.</p>
    </div>

    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
</body>
</html>